<!DOCTYPE html>
<!-- saved from url=(0082)https://trinket.io/embed/python3?noStorage=true&inLibrary=true&addDefaultCode=true -->
<html lang="en" class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths desktop mac landscape mac os macos10 macos10_14 32bit chrome chrome72 chrome72_0 webkit en-us" style=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>Trinket: run code anywhere</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <link rel="icon" href="https://trinket.io/img/icons/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://trinket.io/cache-prefix-7f6b62d2/img/icons/apple-touch-icon-144x144-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://trinket.io/cache-prefix-7f6b62d2/img/icons/apple-touch-icon-114x114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://trinket.io/cache-prefix-7f6b62d2/img/icons/apple-touch-icon-72x72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="https://trinket.io/cache-prefix-7f6b62d2/img/icons/apple-touch-icon-precomposed.png">
  <link rel="stylesheet" type="text/css" href="./font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="./font-mfizz.css">
  <link rel="stylesheet" type="text/css" href="./embed.css">
  

<link rel="stylesheet" type="text/css" href="./github.min.css">



  <script src="./1441353372787187" async=""></script><script async="" src="./fbevents.js"></script><script async="" src="./analytics.js"></script><script type="text/javascript">
    trinket = {
      config : {
        apphostname       : 'trinket.io',
        usersubdomains    :  true,
        protocol          : 'https',
        addthisurl        : '//s7.addthis.com/js/300/addthis_widget.js',
        cachePrefix       : 'cache-prefix-',
        prefixes          :  {"components":"cache-prefix-b8de66a3","js":"cache-prefix-7f6b62d2","css":"cache-prefix-7f6b62d2","img":"cache-prefix-7f6b62d2","fonts":"cache-prefix-7f6b62d2","partials":"cache-prefix-7f6b62d2","skulpt":"321e8852","pypyjs":"cache-prefix-e8e5bcf1"},
        components        :  {"ace-builds":"v1.2.6.1rc2","anchor-js":"2.0.0","angular-file-saver":"1.1.3","angular-load":"0.1.2","angular-notifyjs":"0.1.0","angular-ui-router":"0.2.11","angular-ui-tree":"2.0.10","angular-ui-utils":"0.1.1","angular-xeditable":"0.1.8","bluebird":"3.5.1","d3":"3.4.11","filereader":"107f68c3b9","file-saver.js":"1.20150507.2","font-mfizz":"2.0.1","gsap":"1.15.0","jquery-ui":"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1","jsdiff":"1.0.8","jszip":"3.1.4","lazysizes":"1.5.0","lodash":"2.4.1","modernizr":"2.7.2","ng-file-upload":"1.2.6","ngInfiniteScroll":"1.1.2","notifyjs":"0.4.2","opal":"0.6.2","restangular":"1.3.1","speakingurl":"1.1.5","video.js":"5.20.4","yamljs":"0.1.5"},
        vendorHost        : 'https://trinket-vendor-assets.trinket.io',
        broadcastHostname : 'broadcastapp.trinket.io',
        broadcastPort     : '',
        broadcastProtocol : 'https',
        python3_api       : 'https://python3-5.trinket.io',
        java_api          : 'https://java8.trinket.io',
        R_api             : 'https://r3.trinket.io',
        pygame_api        : 'https://pygame.trinket.io',
        plans             : [{ "connect"  : "Connect"  },
                             { "codeplus" : "Code+" }]
      }
    };
    
    </script>

  <script src="./jquery.min(1).js" type="text/javascript"></script>

  <script src="./modernizr.min.js" type="text/javascript"></script>
  <script src="./detectizr.min.js" type="text/javascript"></script>
  <script src="./md5.js" type="text/javascript"></script>
  <script src="./sha1.js" type="text/javascript"></script>
  <script src="./aes.js" type="text/javascript"></script>

  <!--[if lte IE 9]>
  <script type="text/javascript" src="/js/vendor/jQuery.XDomainRequest.js"></script>
  <![endif]-->

  
  
  
  <script>
    
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    (function() {
      ga('create', 'UA-46899028-1', 'trinket.io');
      
    
    
    })();
  </script>
  
  
  
  
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1441353372787187'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1441353372787187&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
  

  
<style id="ace_editor.css">.ace_editor {position: relative;overflow: hidden;font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;text-align: left;}.ace_scroller {position: absolute;overflow: hidden;top: 0;bottom: 0;background-color: inherit;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;cursor: text;}.ace_content {position: absolute;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 100%;}.ace_dragging .ace_scroller:before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';background: rgba(250, 250, 250, 0.01);z-index: 1000;}.ace_dragging.ace_dark .ace_scroller:before{background: rgba(0, 0, 0, 0.01);}.ace_selecting, .ace_selecting * {cursor: text !important;}.ace_gutter {position: absolute;overflow : hidden;width: auto;top: 0;bottom: 0;left: 0;cursor: default;z-index: 4;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;}.ace_gutter-active-line {position: absolute;left: 0;right: 0;}.ace_scroller.ace_scroll-left {box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;}.ace_gutter-cell {padding-left: 19px;padding-right: 6px;background-repeat: no-repeat;}.ace_gutter-cell.ace_error {background-image: url("");background-repeat: no-repeat;background-position: 2px center;}.ace_gutter-cell.ace_warning {background-image: url("");background-position: 2px center;}.ace_gutter-cell.ace_info {background-image: url("");background-position: 2px center;}.ace_dark .ace_gutter-cell.ace_info {background-image: url("");}.ace_scrollbar {position: absolute;right: 0;bottom: 0;z-index: 6;}.ace_scrollbar-inner {position: absolute;cursor: text;left: 0;top: 0;}.ace_scrollbar-v{overflow-x: hidden;overflow-y: scroll;top: 0;}.ace_scrollbar-h {overflow-x: scroll;overflow-y: hidden;left: 0;}.ace_print-margin {position: absolute;height: 100%;}.ace_text-input {position: absolute;z-index: 0;width: 0.5em;height: 1em;opacity: 0;background: transparent;-moz-appearance: none;appearance: none;border: none;resize: none;outline: none;overflow: hidden;font: inherit;padding: 0 1px;margin: 0 -1px;text-indent: -1em;-ms-user-select: text;-moz-user-select: text;-webkit-user-select: text;user-select: text;white-space: pre!important;}.ace_text-input.ace_composition {background: inherit;color: inherit;z-index: 1000;opacity: 1;text-indent: 0;}.ace_layer {z-index: 1;position: absolute;overflow: hidden;word-wrap: normal;white-space: pre;height: 100%;width: 100%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;pointer-events: none;}.ace_gutter-layer {position: relative;width: auto;text-align: right;pointer-events: auto;}.ace_text-layer {font: inherit !important;}.ace_cjk {display: inline-block;text-align: center;}.ace_cursor-layer {z-index: 4;}.ace_cursor {z-index: 4;position: absolute;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;border-left: 2px solid;transform: translatez(0);}.ace_slim-cursors .ace_cursor {border-left-width: 1px;}.ace_overwrite-cursors .ace_cursor {border-left-width: 0;border-bottom: 1px solid;}.ace_hidden-cursors .ace_cursor {opacity: 0.2;}.ace_smooth-blinking .ace_cursor {-webkit-transition: opacity 0.18s;transition: opacity 0.18s;}.ace_editor.ace_multiselect .ace_cursor {border-left-width: 1px;}.ace_marker-layer .ace_step, .ace_marker-layer .ace_stack {position: absolute;z-index: 3;}.ace_marker-layer .ace_selection {position: absolute;z-index: 5;}.ace_marker-layer .ace_bracket {position: absolute;z-index: 6;}.ace_marker-layer .ace_active-line {position: absolute;z-index: 2;}.ace_marker-layer .ace_selected-word {position: absolute;z-index: 4;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}.ace_line .ace_fold {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;height: 11px;margin-top: -2px;vertical-align: middle;background-image:url(""),url("");background-repeat: no-repeat, repeat-x;background-position: center center, top left;color: transparent;border: 1px solid black;border-radius: 2px;cursor: pointer;pointer-events: auto;}.ace_dark .ace_fold {}.ace_fold:hover{background-image:url(""),url("");}.ace_tooltip {background-color: #FFF;background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));border: 1px solid gray;border-radius: 1px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);color: black;max-width: 100%;padding: 3px 4px;position: fixed;z-index: 999999;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: default;white-space: pre;word-wrap: break-word;line-height: normal;font-style: normal;font-weight: normal;letter-spacing: normal;pointer-events: none;}.ace_folding-enabled > .ace_gutter-cell {padding-right: 13px;}.ace_fold-widget {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0 -12px 0 1px;display: none;width: 11px;vertical-align: top;background-image: url("");background-repeat: no-repeat;background-position: center;border-radius: 3px;border: 1px solid transparent;cursor: pointer;}.ace_folding-enabled .ace_fold-widget {display: inline-block;   }.ace_fold-widget.ace_end {background-image: url("");}.ace_fold-widget.ace_closed {background-image: url("");}.ace_fold-widget:hover {border: 1px solid rgba(0, 0, 0, 0.3);background-color: rgba(255, 255, 255, 0.2);box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);}.ace_fold-widget:active {border: 1px solid rgba(0, 0, 0, 0.4);background-color: rgba(0, 0, 0, 0.05);box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);}.ace_dark .ace_fold-widget {background-image: url("");}.ace_dark .ace_fold-widget.ace_end {background-image: url("");}.ace_dark .ace_fold-widget.ace_closed {background-image: url("");}.ace_dark .ace_fold-widget:hover {box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);background-color: rgba(255, 255, 255, 0.1);}.ace_dark .ace_fold-widget:active {box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);}.ace_fold-widget.ace_invalid {background-color: #FFB4B4;border-color: #DE5555;}.ace_fade-fold-widgets .ace_fold-widget {-webkit-transition: opacity 0.4s ease 0.05s;transition: opacity 0.4s ease 0.05s;opacity: 0;}.ace_fade-fold-widgets:hover .ace_fold-widget {-webkit-transition: opacity 0.05s ease 0.05s;transition: opacity 0.05s ease 0.05s;opacity:1;}.ace_underline {text-decoration: underline;}.ace_bold {font-weight: bold;}.ace_nobold .ace_bold {font-weight: normal;}.ace_italic {font-style: italic;}.ace_error-marker {background-color: rgba(255, 0, 0,0.2);position: absolute;z-index: 9;}.ace_highlight-marker {background-color: rgba(255, 255, 0,0.2);position: absolute;z-index: 8;}.ace_br1 {border-top-left-radius    : 3px;}.ace_br2 {border-top-right-radius   : 3px;}.ace_br3 {border-top-left-radius    : 3px; border-top-right-radius:    3px;}.ace_br4 {border-bottom-right-radius: 3px;}.ace_br5 {border-top-left-radius    : 3px; border-bottom-right-radius: 3px;}.ace_br6 {border-top-right-radius   : 3px; border-bottom-right-radius: 3px;}.ace_br7 {border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-right-radius: 3px;}.ace_br8 {border-bottom-left-radius : 3px;}.ace_br9 {border-top-left-radius    : 3px; border-bottom-left-radius:  3px;}.ace_br10{border-top-right-radius   : 3px; border-bottom-left-radius:  3px;}.ace_br11{border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-left-radius:  3px;}.ace_br12{border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}.ace_br13{border-top-left-radius    : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}.ace_br14{border-top-right-radius   : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}.ace_br15{border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}
/*# sourceURL=ace/css/ace_editor.css */</style><style id="ace-tm">.ace-tm .ace_gutter {background: #f0f0f0;color: #333;}.ace-tm .ace_print-margin {width: 1px;background: #e8e8e8;}.ace-tm .ace_fold {background-color: #6B72E6;}.ace-tm {background-color: #FFFFFF;color: black;}.ace-tm .ace_cursor {color: black;}.ace-tm .ace_invisible {color: rgb(191, 191, 191);}.ace-tm .ace_storage,.ace-tm .ace_keyword {color: blue;}.ace-tm .ace_constant {color: rgb(197, 6, 11);}.ace-tm .ace_constant.ace_buildin {color: rgb(88, 72, 246);}.ace-tm .ace_constant.ace_language {color: rgb(88, 92, 246);}.ace-tm .ace_constant.ace_library {color: rgb(6, 150, 14);}.ace-tm .ace_invalid {background-color: rgba(255, 0, 0, 0.1);color: red;}.ace-tm .ace_support.ace_function {color: rgb(60, 76, 114);}.ace-tm .ace_support.ace_constant {color: rgb(6, 150, 14);}.ace-tm .ace_support.ace_type,.ace-tm .ace_support.ace_class {color: rgb(109, 121, 222);}.ace-tm .ace_keyword.ace_operator {color: rgb(104, 118, 135);}.ace-tm .ace_string {color: rgb(3, 106, 7);}.ace-tm .ace_comment {color: rgb(76, 136, 107);}.ace-tm .ace_comment.ace_doc {color: rgb(0, 102, 255);}.ace-tm .ace_comment.ace_doc.ace_tag {color: rgb(128, 159, 191);}.ace-tm .ace_constant.ace_numeric {color: rgb(0, 0, 205);}.ace-tm .ace_variable {color: rgb(49, 132, 149);}.ace-tm .ace_xml-pe {color: rgb(104, 104, 91);}.ace-tm .ace_entity.ace_name.ace_function {color: #0000A2;}.ace-tm .ace_heading {color: rgb(12, 7, 255);}.ace-tm .ace_list {color:rgb(185, 6, 144);}.ace-tm .ace_meta.ace_tag {color:rgb(0, 22, 142);}.ace-tm .ace_string.ace_regex {color: rgb(255, 0, 0)}.ace-tm .ace_marker-layer .ace_selection {background: rgb(181, 213, 255);}.ace-tm.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px white;}.ace-tm .ace_marker-layer .ace_step {background: rgb(252, 255, 0);}.ace-tm .ace_marker-layer .ace_stack {background: rgb(164, 229, 101);}.ace-tm .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgb(192, 192, 192);}.ace-tm .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.07);}.ace-tm .ace_gutter-active-line {background-color : #dcdcdc;}.ace-tm .ace_marker-layer .ace_selected-word {background: rgb(250, 250, 255);border: 1px solid rgb(200, 200, 250);}.ace-tm .ace_indent-guide {background: url("") right repeat-y;}
/*# sourceURL=ace/css/ace-tm */</style><style>    .error_widget_wrapper {        background: inherit;        color: inherit;        border:none    }    .error_widget {        border-top: solid 2px;        border-bottom: solid 2px;        margin: 5px 0;        padding: 10px 40px;        white-space: pre-wrap;    }    .error_widget.ace_error, .error_widget_arrow.ace_error{        border-color: #ff5a5a    }    .error_widget.ace_warning, .error_widget_arrow.ace_warning{        border-color: #F1D817    }    .error_widget.ace_info, .error_widget_arrow.ace_info{        border-color: #5a5a5a    }    .error_widget.ace_ok, .error_widget_arrow.ace_ok{        border-color: #5aaa5a    }    .error_widget_arrow {        position: absolute;        border: solid 5px;        border-top-color: transparent!important;        border-right-color: transparent!important;        border-left-color: transparent!important;        top: -5px;    }</style><style>.ace_snippet-marker {    -moz-box-sizing: border-box;    box-sizing: border-box;    background: rgba(194, 193, 208, 0.09);    border: 1px dotted rgba(211, 208, 235, 0.62);    position: absolute;}</style><style>.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {    background-color: #CAD6FA;    z-index: 1;}.ace_editor.ace_autocomplete .ace_line-hover {    border: 1px solid #abbffe;    margin-top: -1px;    background: rgba(233,233,253,0.4);}.ace_editor.ace_autocomplete .ace_line-hover {    position: absolute;    z-index: 2;}.ace_editor.ace_autocomplete .ace_scroller {   background: none;   border: none;   box-shadow: none;}.ace_rightAlignedText {    color: gray;    display: inline-block;    position: absolute;    right: 4px;    text-align: right;    z-index: -1;}.ace_editor.ace_autocomplete .ace_completion-highlight{    color: #000;    text-shadow: 0 0 0.01em;}.ace_editor.ace_autocomplete {    width: 280px;    z-index: 200000;    background: #fbfbfb;    color: #444;    border: 1px lightgray solid;    position: fixed;    box-shadow: 2px 3px 5px rgba(0,0,0,.2);    line-height: 1.4;}</style><meta class="foundation-data-attribute-namespace"><meta class="foundation-mq-xxlarge"><meta class="foundation-mq-xlarge-only"><meta class="foundation-mq-xlarge"><meta class="foundation-mq-large-only"><meta class="foundation-mq-large"><meta class="foundation-mq-medium-only"><meta class="foundation-mq-medium"><meta class="foundation-mq-small-only"><meta class="foundation-mq-small"><style></style><script src="./f(2).txt"></script><script src="./theme-xcode.js"></script><script src="./mode-python.js"></script><style id="ace-xcode">.ace-xcode .ace_gutter {background: #e8e8e8;color: #333}.ace-xcode .ace_print-margin {width: 1px;background: #e8e8e8}.ace-xcode {background-color: #FFFFFF;color: #000000}.ace-xcode .ace_cursor {color: #000000}.ace-xcode .ace_marker-layer .ace_selection {background: #B5D5FF}.ace-xcode.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FFFFFF;}.ace-xcode .ace_marker-layer .ace_step {background: rgb(198, 219, 174)}.ace-xcode .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #BFBFBF}.ace-xcode .ace_marker-layer .ace_active-line {background: rgba(0, 0, 0, 0.071)}.ace-xcode .ace_gutter-active-line {background-color: rgba(0, 0, 0, 0.071)}.ace-xcode .ace_marker-layer .ace_selected-word {border: 1px solid #B5D5FF}.ace-xcode .ace_constant.ace_language,.ace-xcode .ace_keyword,.ace-xcode .ace_meta,.ace-xcode .ace_variable.ace_language {color: #C800A4}.ace-xcode .ace_invisible {color: #BFBFBF}.ace-xcode .ace_constant.ace_character,.ace-xcode .ace_constant.ace_other {color: #275A5E}.ace-xcode .ace_constant.ace_numeric {color: #3A00DC}.ace-xcode .ace_entity.ace_other.ace_attribute-name,.ace-xcode .ace_support.ace_constant,.ace-xcode .ace_support.ace_function {color: #450084}.ace-xcode .ace_fold {background-color: #C800A4;border-color: #000000}.ace-xcode .ace_entity.ace_name.ace_tag,.ace-xcode .ace_support.ace_class,.ace-xcode .ace_support.ace_type {color: #790EAD}.ace-xcode .ace_storage {color: #C900A4}.ace-xcode .ace_string {color: #DF0002}.ace-xcode .ace_comment {color: #008E00}.ace-xcode .ace_indent-guide {background: url() right repeat-y}
/*# sourceURL=ace/css/ace-xcode */</style></head>
<body id="embed_content_python3" data-no-metrics="false" data-assignment="false" data-view-only="false" class="mode-standard  anonymous" data-is-mobile="false" marginwidth="0" marginheight="0">
  <input id="whoami" type="hidden" value="shen-huang-964-my-csun-edu">
  
  <input id="user" type="hidden" value="5c60c44c837cc7aa5e990009">
  
  <input id="roles" type="hidden" value="5b3bd6fb93ac3f11ef9b95f189d9f095+U2FsdGVkX1+Ln6PzMn3EnLAz3PQjDPs9rRM5BdjKgG/npG117UntVcB+f/BRmywjcFaM9Lo2SwYTt5xhPm6awn4muRqrAOwNBiAaQinrKcgHBHK/fZLN+hF09NxcQnjsANiQ+jepfad1SVELc4TaTs1l/5kcINZj33gH4NZleOL5JlsggZG1/YH1UKpbhu2vOIRYzVDr/TkNXW9ZDA1kNCXjVygNGKzlSAoqwbeyybS05U/7mjuh2iiZv9bKaJyS+nIb0IoeP18gprhYrH2PXkGaXtksY8y8GDGVstSrMZAP5iradgD8xR5CdzH4ta7ld7fqzo0Ikl7v4eeKc1LWjQPPHjQsRhVzFglZMWxGCq4=">
  
  <script>
    trinketObject = {};
  
    draftObject   = undefined;
    
    userSettings = {"disableAceEditor":false};
    
  
  </script>
  <input id="shareType" type="hidden" value="python3">
  <input id="proxy" type="hidden" value="https://trinket.io/proxy">

  <div id="wrapper" class="off-canvas-wrap owner-view row" data-offcanvas="">
    <div class="trinket-wrapper inner-wrap">

    

      <nav id="menu" class="trinket-header " data-interface="top-menu">
        <section class="left">
          <div class="icon-bar left-menu-toggle">
            <a class="item menu-button left-off-canvas-toggle" data-action="menu.options">
              <i class="fa fa-bars"></i>
            </a>
          </div>
        </section>
        <section class="left title-bar">
          <span title="hosted by trinket.io" data-dropdown="brand-menu" aria-controls="brand-menu" aria-expanded="false">
            <img class="show-for-large-up" src="./trinket-logo.png">
            <img class="show-for-medium-down" src="./trinket-logo-circles.png">
          </span>
          <ul id="brand-menu" class="f-dropdown" data-dropdown-content="" aria-hidden="true" tabindex="-1">
            <li><a id="brand">View on trinket.io</a></li>
          </ul>
          
<section class="trinket-label">
  <i class="icon-python"> <label class="show-for-small-only">3</label></i>
  <label class="show-for-large-up">Python3</label>
</section>

        </section>
        <section class="mode-toolbar left" data-mode="interact" role="menubar">
          <div class="icon-bar label-right">
            

<a class="edit-it menu-button item allow-original show-for-small-only" data-action="code.edit" title="Edit the code.">
  <i class="fa fa-pencil"></i>
  <label class="show-for-large-up">Code</label>
</a>
<a class="button run-it menu-button item split allow-original" data-action="code.run" title="View the result." role="button" aria-label="Run Button" tabindex="0">
  <i class="fa fa-play"></i>
  <label class="show-for-large-up">Run</label>
  <span data-dropdown="run-options" data-options="align:bottom"></span>
</a>


            
            <button class="show-for-medium-up button split item menu-button" data-action="sharing.social" data-dropdown="share-options" data-options="align:bottom" role="button" aria-label="Share Menu" aria-controls="share-options"><i class="fa fa-share-alt"></i><label id="share_button_label" class="show-for-large-up">Share</label><span data-dropdown="share-options" data-options="align:bottom" role="menu"></span></button>
            
            
            
          </div>
        </section>
        
        <section class="mode-indicator right">
          <div class="icon-bar">
            <div class="item"><div id="draftMessage" class="hide draft-message"></div></div>
            
          </div>
        </section>
        
        <section class="mode-toolbar right hide">
          <div class="icon-bar">
            <a id="gallery-item" title="Visit the Trinket User Gallery" class="menu-button has-tip item show-for-medium-up" data-action="view.gallery">
              <i class="fa fa-th-large"></i>
              <label class="show-for-medium-up">Gallery</label>
            </a>
          </div>
        </section>
      </nav>

      <aside class="left-off-canvas-menu" data-interface="trinket-menu" aria-hidden="true">
  <ul class="off-canvas-list mode-menu" data-mode="interact">
    
    <li><label>Menu</label></li>
    
    
    <li>
      <a class="reset-it menu-button" data-action="code.reset"><i class="fa fa-refresh"></i>Reset</a>
    </li>
    
    <li>
      <a class="menu-button" data-action="mode.fullscreen" data-no-analytics="true"><i class="fa fa-expand"></i>Fullscreen</a>
    </li>
    
    <li>
      <a class="menu-button" data-action="mode.download"><i class="fa fa-download"></i>Download</a>
    </li>
    
    
    
    
    <li><label>Sharing</label></li>
    <li>
      <a class="share-it menu-button" data-action="sharing.share" aria-controls="share-options"><i class="fa fa-share"></i>Share</a>
    </li>
    <li>
      <a class="embed-it menu-button" data-action="sharing.embed"><i class="fa fa-code"></i>Embed</a>
    </li>
    <li>
      <a class="email-it menu-button" data-action="sharing.email"><i class="fa fa-envelope-o"></i>Email</a>
    </li>
    
    
    <li><label>Font Size</label></li>
    <li>
      <a class="menu-button font-size small-font left" data-action="code.fontsize" data-data="1em">aA</a>
      <a class="menu-button font-size medium-font left" data-action="code.fontsize" data-data="1.5em">aA</a>
      <a class="menu-button font-size large-font left" data-action="code.fontsize" data-data="2em">aA</a>
    </li>
    
  </ul>
</aside>


      

      <section class="trinket-content main-section" data-interface="content">
        <div id="flashMessage" class="container hide">
          <div id="flashContent"></div>
        </div>
        <div class="trinket-content-wrapper " role="main">
          <div id="content-overlay" class="hide" data-interface="overlay" style="font-size: 1em;"></div>
          
  <input id="honeypot" type="text" tabindex="-1" style="font-size: 1em;">
  <input id="start-value" type="hidden" value="code" style="font-size: 1em;">
  <input id="runOption-value" type="hidden" value="run" style="font-size: 1em;">
  <input id="runMode-value" type="hidden" value="" style="font-size: 1em;">

  <div id="editor" class="code-editor" data-interface="editor" style="font-size: 1em;"><div class="code-editor" data-interface="code-editor"><div class="tab-nav"><dl class="left-options"><dd class="tab-button"><a class="tab-scroll-link left-arrow" data-direction="-1"><i class="fa fa-chevron-left"></i></a></dd><dd class="tab-button"><a class="tab-scroll-link right-arrow" data-direction="1"><i class="fa fa-chevron-right"></i></a></dd></dl><dl class="scrollable-content" role="tablist" aria-label="File tabs"><dd class="tab permanent active"><a class="file-tab-link" aria-label="main.py tab" role="tab"><span class="file-name">main.py</span><span class="tab-options-link menu-button" data-action="file.options" role="button" tabindex="0"></span></a></dd></dl><dl class="right-options"><dd class="tab-button" title="Create text file"><a class="add-file-link menu-button" data-action="file.add" aria-label="Add new file" role="button"><i class="fa fa-plus"></i></a></dd><dd class="tab-button" title="Upload text file"><a class="upload-file-link menu-button" data-action="file.upload" aria-label="Upload text file" role="button"><i class="fa fa-upload"></i></a></dd></dl><div class="clearfix"></div></div><div class="file-content-container"><div class="file-content ace_editor active ace-xcode ace_focus" style="font-size: inherit;"><textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; height: 16px; width: 7.20125px; left: 239.232px; top: 513px;"></textarea><div class="ace_gutter"><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: -15px; height: 561px; width: 48px;"><div class="ace_gutter-cell " style="height: 16px;">2</div><div class="ace_gutter-cell " style="height: 16px;">3</div><div class="ace_gutter-cell " style="height: 16px;">4</div><div class="ace_gutter-cell " style="height: 16px;">5</div><div class="ace_gutter-cell " style="height: 16px;">6</div><div class="ace_gutter-cell " style="height: 16px;">7</div><div class="ace_gutter-cell " style="height: 16px;">8</div><div class="ace_gutter-cell " style="height: 16px;">9</div><div class="ace_gutter-cell " style="height: 16px;">10</div><div class="ace_gutter-cell " style="height: 16px;">11</div><div class="ace_gutter-cell " style="height: 16px;">12</div><div class="ace_gutter-cell " style="height: 16px;">13</div><div class="ace_gutter-cell " style="height: 16px;">14<span class="ace_fold-widget ace_start ace_open" style="height: 16px;"></span></div><div class="ace_gutter-cell " style="height: 16px;">15</div><div class="ace_gutter-cell " style="height: 16px;">16</div><div class="ace_gutter-cell " style="height: 16px;">17</div><div class="ace_gutter-cell " style="height: 16px;">18</div><div class="ace_gutter-cell " style="height: 16px;">19</div><div class="ace_gutter-cell " style="height: 16px;">20</div><div class="ace_gutter-cell " style="height: 16px;">21</div><div class="ace_gutter-cell " style="height: 16px;">22</div><div class="ace_gutter-cell " style="height: 16px;">23</div><div class="ace_gutter-cell " style="height: 16px;">24</div><div class="ace_gutter-cell " style="height: 16px;">25</div><div class="ace_gutter-cell " style="height: 16px;">26</div><div class="ace_gutter-cell " style="height: 16px;">27</div><div class="ace_gutter-cell " style="height: 16px;">28</div><div class="ace_gutter-cell " style="height: 16px;">29</div><div class="ace_gutter-cell " style="height: 16px;">30</div><div class="ace_gutter-cell " style="height: 16px;">31</div><div class="ace_gutter-cell " style="height: 16px;">32</div><div class="ace_gutter-cell " style="height: 16px;">33<span class="ace_fold-widget ace_start ace_open" style="height: 16px;"></span></div><div class="ace_gutter-cell " style="height: 16px;">34</div><div class="ace_gutter-cell " style="height: 16px;">35</div></div><div class="ace_gutter-active-line" style="top: 513px; height: 16px;"></div></div><div class="ace_scroller" style="left: 48px; right: 15px; bottom: 0px;"><div class="ace_content" style="margin-top: -15px; width: 548px; height: 561px; margin-left: 0px;"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 580.1px; visibility: hidden;"></div></div><div class="ace_layer ace_marker-layer"><div class="ace_active-line" style="height:16px;top:528px;left:0;right:0;"></div><div class="ace_bracket ace_start ace_br15" style="height:16px;width:7.20125px;top:528px;left:176.82999999999998px;"></div></div><div class="ace_layer ace_text-layer" style="padding: 0px 4px;"><div class="ace_line" style="height:16px"><span class="ace_keyword">import</span> <span class="ace_identifier">random</span></div><div class="ace_line" style="height:16px"><span class="ace_keyword">import</span> <span class="ace_identifier">time</span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_comment"># Instantiate data sets</span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_identifier">quickSortTime</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_paren ace_lparen">[</span><span class="ace_paren ace_rparen">]</span></div><div class="ace_line" style="height:16px"><span class="ace_identifier">mergeSortTime</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_paren ace_lparen">[</span><span class="ace_paren ace_rparen">]</span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_comment"># Randomly generate an array with the size i for sorting</span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_identifier">i</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_constant ace_numeric">5</span></div><div class="ace_line" style="height:16px"><span class="ace_identifier">sortThis</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_paren ace_lparen">[</span><span class="ace_paren ace_rparen">]</span></div><div class="ace_line" style="height:16px"><span class="ace_keyword">for</span> <span class="ace_identifier">index</span> <span class="ace_keyword">in</span> <span class="ace_support ace_function">range</span> <span class="ace_paren ace_lparen">(</span><span class="ace_constant ace_numeric">0</span>, <span class="ace_constant ace_numeric">100</span><span class="ace_paren ace_rparen">)</span>:</div><div class="ace_line" style="height:16px">  <span class="ace_identifier">sortThis</span>.<span class="ace_identifier">append</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">random</span>.<span class="ace_identifier">randrange</span><span class="ace_paren ace_lparen">(</span><span class="ace_constant ace_numeric">0</span>, <span class="ace_constant ace_numeric">1000000</span><span class="ace_paren ace_rparen">))</span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_identifier">quickSortThis</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">sortThis</span><span class="ace_paren ace_lparen">[</span>:<span class="ace_paren ace_rparen">]</span></div><div class="ace_line" style="height:16px"><span class="ace_identifier">mergeSortThis</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">sortThis</span><span class="ace_paren ace_lparen">[</span>:<span class="ace_paren ace_rparen">]</span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"> </div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_comment"># Display the data</span></div><div class="ace_line" style="height:16px"></div><div class="ace_line" style="height:16px"><span class="ace_identifier">data</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_paren ace_lparen">[[</span><span class="ace_string">"Quick Sort"</span>, <span class="ace_identifier">quickSortTime</span><span class="ace_paren ace_rparen">]</span>,</div><div class="ace_line" style="height:16px"><span class="ace_indent-guide">  </span><span class="ace_indent-guide">  </span><span class="ace_indent-guide">  </span>  <span class="ace_paren ace_lparen">[</span><span class="ace_string">"Merge Sort"</span>, <span class="ace_identifier">mergeSortTime</span><span class="ace_paren ace_rparen">]]</span></div><div class="ace_line" style="height:16px"><span class="ace_identifier">stackedline_chart</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">pygal</span>.<span class="ace_identifier">StackedLine</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">fill</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_constant ace_language">True</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:16px"><span class="ace_identifier">stackedline_chart</span>.<span class="ace_identifier">title</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_string">"Time Compairson between Quicksort &amp; Merge Sort"</span></div><div class="ace_line" style="height:16px"><span class="ace_identifier">stackedline_chart</span>.<span class="ace_identifier">x_labels</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_support ace_function">map</span><span class="ace_paren ace_lparen">(</span><span class="ace_support ace_function">str</span>, <span class="ace_support ace_function">range</span><span class="ace_paren ace_lparen">(</span><span class="ace_constant ace_numeric">0</span>, <span class="ace_constant ace_numeric">50</span><span class="ace_paren ace_rparen">))</span></div><div class="ace_line" style="height:16px"><span class="ace_keyword">for</span> <span class="ace_identifier">label</span>, <span class="ace_identifier">data_points</span> <span class="ace_keyword">in</span> <span class="ace_identifier">data</span>:</div><div class="ace_line" style="height:16px"><span class="ace_indent-guide">  </span>  <span class="ace_identifier">stackedline_chart</span>.<span class="ace_identifier">add</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">label</span>, <span class="ace_identifier">data_points</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:16px"><span class="ace_identifier">stackedline_chart</span>.<span class="ace_identifier">render</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer"><div class="ace_cursor" style="left: 191.232px; top: 528px; width: 7.20125px; height: 16px;"></div></div></div></div><div class="ace_scrollbar ace_scrollbar-v" style="width: 20px; bottom: 0px;"><div class="ace_scrollbar-inner" style="width: 20px; height: 560px;"></div></div><div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 20px; left: 48px; right: 15px;"><div class="ace_scrollbar-inner" style="height: 20px; width: 570px;"></div></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;"><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;"></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></div></div><div class="info-area collapsed"><div class="info-quick"></div><div class="scroll-wrap"><div class="info-full"></div></div><a class="expander fa"></a></div></div><form id="file-upload-form"><input type="file" name="file-upload" id="file-upload" class="hidden" tabindex="-1"></form></div>

  
  <div id="dragbar" style="font-size: 1em;"></div>
  

  <div id="codeOutput" class="codeOutput hide" data-interface="output" style="font-size: 1em;">
    

    <div id="errorConnecting" class="hide">
      <p>There was a problem connecting to the server.<br><br>Please check your connection and try running the trinket again.</p>
    </div>

    <div id="outputTabs" class="hideInstructions">
      <div class="active menu-button" id="codeOutputTab" data-action="output.view">Result</div>
      <div class="menu-button" id="instructionsTab" data-action="instructions.view"><i class="fa fa-list"></i> Instructions</div>
    </div>

    <div id="outputContainer" class="withoutTabs">
      <div id="console-wrap">
        <div id="python3-console-output" aria-live="polite" aria-label="Code Output"></div>
        <a id="reset-output" class="hide" title="clear output"><i class="fa fa-ban"></i></a>
      </div>
    </div>

    <div id="instructionsContainer" class="hide">

  <div id="instructionsOutput"></div>
</div>

    

  </div>

  
  <div id="runFirstModal" class="reveal-modal small" data-interface="run-modal" data-reveal="" data-css-top="20" data-offset="200" style="font-size: 1em;">
    <h2>Run your code first!</h2>
    <p class="lead">
      It looks like you haven't tried running your new code.
    </p>
    <p>Try clicking
    <a id="modalRun" class="button tiny" data-action="code.run"><i class="fa fa-play"></i>&nbsp;Run</a>
    and if you like the result, try sharing again.</p>
    <a class="close-reveal-modal">×</a>
  </div>
  


        </div>
      </section>

      <a class="exit-off-canvas"></a>

    

    </div>
  </div>

  
  <script id="statusMessageTemplate" type="text/html">
    <div id="statusMessages" aria-live="assertive" role="alert" tabindex=0 data-inteface="alert" data-alert class="alert-box {{type}}">
      <div>{{message}}</div>
      <a href="#" title="Close message" class="close" aria-label="Close Alert" role="button"><i class="fa fa-times-circle"></i></a>
    </div>
  </script>
  

  <!-- the response-indicator divs allow javascript to determine which responsive size is being applied -->
  <div class="responsive-indicator show-for-small-only" data-size="small"></div>
  <div class="responsive-indicator show-for-medium-only" data-size="medium"></div>
  <div class="responsive-indicator show-for-large-up" data-size="large"></div>

  

  <div id="confirmResetModal" class="reveal-modal medium" data-reveal="" data-css-top="35">
    <div class="row">
      <h2 id="modalTitle">Are you sure?</h2>
      <p class="lead">Resetting will undo all of your current changes.</p>
      <a class="button caution menu-button allow-original" data-action="code.cancel-reset">Cancel</a>
      <a class="button danger menu-button allow-original" data-action="code.confirm-reset">Yes, I am sure.</a>
      <a class="close-reveal-modal" aria-label="Close">×</a>
    </div>
  </div>

  <div id="controlRoomModal" class="reveal-modal large" data-reveal="" data-css-top="35" data-interface="control-room">
    <p><strong>Broadcast Control Room</strong></p>
  
    <a class="close-reveal-modal" aria-label="Close">×</a>
  </div>

  
      
  
  <ul id="displayOptionTextList" class="hide">
    <li data-value="">Show <span class="blocksOrCode">code</span> and output side-by-side (smaller screens will only show one at a time)</li>
    <li data-value="outputOnly">Only show output (hide the <span class="blocksOrCode">code</span>)</li>
    <li data-value="toggleCode">Only show <span class="blocksOrCode">code</span> or output (let users toggle between them)</li>
  </ul>
  <div id="shareModal" class="reveal-modal full" data-reveal="" data-css-top="0" data-offset="0" role="dialog" aria-label="Share Trinket Link Dialog">
    <div class="row">
      <div class="small-12 columns">
      <div class="row">
      <span class="modal-title" role="heading">Share Your Code!
        <span id="addthisModal">
          <span id="addthisWrapper">
            <span id="addthis" class="addthis_toolbox addthis_floating_style addthis_32x32_style" addthis:url="https://trinket.io/python3/">
              <a class="addthis_button_facebook"></a>
              <a class="addthis_button_twitter"></a>
              <a class="addthis_button_google_plusone_share"></a>
            </span>
          </span>
        </span>
      </span>
    </div>
    <form>
      <div class="row">
        <label for="shareURL"><i>Copy the link or click a button above to share your code</i></label>
          <div id="shareUrl" class="faux-input" data-metric="linkShares" role="textbox" tabindex="0" aria-label="Copy this link to share your trinket."></div>
      </div>
      <div class="row">
        <fieldset>
          <legend>Customize</legend>
          
          <div id="shareRunOption">
            <select id="runOptionLink" name="runOptionLink" class="runOptions" data-type="shareUrl" data-trinket-shortcode="" data-trinket-runmode="">
              <option value="">Allow either Run or Interactive console</option>
              <option value="run">Run code only</option>
              <option value="console">Interactive console only</option>
            </select>
          </div>
          
          
          <div id="shareDisplayOptions">
            <select id="displayOptionLink" name="displayOptionLink" class="displayOptions" data-type="shareUrl" data-trinket-shortcode="" data-trinket-runmode="">
              <option value="">Show code and output side-by-side (smaller screens will only show one at a time)</option>
              <option value="outputOnly">Only show output (hide the code)</option>
              <option value="toggleCode">Only show code or output (let users toggle between them)</option>
            </select>
          </div>
          
          
          <input type="checkbox" id="showInstructionsShareToggle" name="showInstructionsShare" class="checkboxToggle" value="shareUrl"><label for="showInstructionsShareToggle">Show instructions first when loaded</label>
          
        </fieldset>
      </div>
    </form>
    
    <div id="share-pro-tip" class="row">

<span class="label round"><i class="fa fa-info-circle"></i> pro tip</span>
 You can save a copy for yourself with the <i class="fa fa-copy"></i> Copy or <i class="fa fa-save"></i> Remix button.
</div>
    
    </div>
    </div>
    <a class="close-reveal-modal">×</a>
  </div>
  <div id="embedModal" class="reveal-modal full" data-reveal="" data-css-top="0" data-offset="0" role="dialog" aria-label="Embed Trinket Dialog">
    <div class="row">
      <span class="modal-title" role="heading">Embed Your Code!</span>
    </div>
    <form>
      <div class="row">
        <label for="embedCode">Embed this code on your site</label>
      </div>
      <div class="row">
        <div class="small-12 columms">
          <div id="embedCode" class="faux-input textarea" data-metric="embedShares" role="textbox" aria-multiline="false" tabindex="0" aria-label="Copy this embed code"></div>
        </div>
      </div>
      <div class="row">
        <fieldset>
          <legend>Customize</legend>
      
        <div id="embedRunOption">
          <select id="runOptionEmbed" name="runOptionEmbed" class="runOptions" data-type="embedCode" data-trinket-shortcode="" data-trinket-runmode="">
            <option value="">Allow either Run or Interactive console</option>
            <option value="run">Run code only</option>
            <option value="console">Interactive console only</option>
          </select>
        </div>
      
      
      <div id="embedDisplayOptions">
        <select id="displayOptionEmbed" name="displayOptionEmbed" class="displayOptions" data-type="embedCode" data-trinket-shortcode="" data-trinket-runmode="">
          <option value="">Show code and output side-by-side (smaller screens will only show one at a time)</option>
          <option value="outputOnly">Only show output (hide the code)</option>
          <option value="toggleCode">Only show code or output (let users toggle between them)</option>
        </select>
        
        <input type="checkbox" id="autorunEmbedToggle" name="autorunEmbed" class="checkboxToggle" value="embedCode"><label for="autorunEmbedToggle">Auto run trinket when loaded</label>
        
        
        
          <input type="checkbox" id="showInstructionsEmbedToggle" name="showInstructionsEmbed" class="checkboxToggle" value="embedCode"><label for="showInstructionsEmbedToggle">Show instructions first when loaded</label>
        
      </div>
      
        </fieldset>
      </div>
    </form>
    <a class="close-reveal-modal">×</a>
  </div>
  <div id="emailModal" class="reveal-modal full" data-reveal="" data-css-top="0" data-offset="0" role="dialog" aria-label="Email Trinket Dialog">
    <div class="row first-row">
     <span class="modal-title" role="heading">Email Your Code!</span>
    </div>
    <form id="emailModalForm" data-trinket-id="" role="form">
      <div class="row">
        <div class="small-12 medium-3 columns">
          <label class="inline" for="share-email">Send To</label>
        </div>
        <div class="small-12 medium-9 columns">
          <input type="email" id="share-email" name="email" placeholder="What email address should we send the link to?" required="">
        </div>
      </div>
      <div class="row">
        <div class="small-12 medium-3 columns">
          <label class="inline" for="share-yourname">Your Name</label>
        </div>
        <div class="small-12 medium-9 columns">
          <input type="text" id="share-yourname" name="yourname" placeholder="What is your name?" required="">
        </div>
      </div>
      <div class="row">
        <div class="small-12 medium-3 columns">
          <label class="inline" for="share-youremail">Your Email</label>
        </div>
        <div class="small-12 medium-9 columns">
          <input type="email" id="share-youremail" name="youremail" value="shen.huang.964@my.csun.edu" placeholder="Your email address - so the recipient can reply to you" disabled="">
        </div>
      </div>
      <div class="row">
        <div class="small-12 medium-3 columns">
          <input id="emailToken" name="emailToken" type="hidden" value="">
          <input id="sendEmail" class="button success small" type="submit" value="Send">
        </div>
        <div id="emailAlert" class="small-12 medium-9 columns end hide"></div>
      </div>
    </form>
    
    <div class="row">

<span class="label round"><i class="fa fa-info-circle"></i> pro tip</span>
 You can save a copy for yourself with the <i class="fa fa-copy"></i> Copy or <i class="fa fa-save"></i> Remix button.
</div>
    
    <a class="close-reveal-modal">×</a>
  </div>

<div id="publishModal" class="reveal-modal full" data-reveal="" data-css-top="0" data-offset="0" role="dialog" aria-label="Publish Trinket Dialog">
  <div class="row">
    <span class="modal-title" role="heading">Publish Your Trinket!</span>
  </div>
  <form id="publishModalForm" data-trinket-id="" role="form">
    <div class="row">
      <div class="small-12 medium-3 columns">
        <label class="inline" for="publish-slug">
          Site Name <i class="fa fa-info-circle open" data-tooltip="" aria-haspopup="true" data-selector="tooltip-jsm82y2h0" aria-describedby="tooltip-jsm82y2h0" title=""></i>
        </label>
      </div>
      <div class="small-10 medium-5 columns">
        <input type="text" id="publish-slug" name="slug" required="">
      </div>
      <div class="small-2 medium-4 columns">
        <i id="slug-icon-status"></i>
      </div>
    </div>
    <div id="slug-status" class="row hide">
      <div class="small-12 medium-offset-3 medium-5 columns end">
        <label id="slug-status-text">test</label>
      </div>
    </div>
    <div class="row">
      <div class="small-12 medium-3 columns">
        <label class="inline">Site URL</label>
      </div>
      <div class="small-12 medium-9 columns">
        <p><a href="https://trinket.io/embed/python3?noStorage=true&amp;inLibrary=true&amp;addDefaultCode=true" id="published-url" target="_blank"></a></p>
      </div>
    </div>
    <div class="row">
      <div class="small-6 columns">
        <a id="publishTrinket" class="button success small"><i class="fa fa-book"></i> <span id="publish-text">Publish</span></a>
      </div>
      <div class="small-6 columns">
        <a id="unpublishTrinket" class="button caution small right">Unpublish</a>
      </div>
    </div>
  </form>
  <a class="close-reveal-modal">×</a>
</div>

<div id="addToGroupModal" class="shared-modal reveal-modal full" data-reveal="" data-css-top="0" data-offset="0">
  <div class="row">
    <div id="add-to-group-messages"></div>
    <h2>Add to Group</h2>
  </div>
  <div class="row">
    <div class="medium-12 large-6 columns">
      <section id="have-groups" class="hide">
        <p>Decide which group to add this trinket below.</p>
        <ul id="groups-list"></ul>
      </section>
      <section id="no-groups" class="hide">
        <p>You don't have any groups that you can add a trinket to — try creating a new one!</p>
      </section>
    </div>
    <div class="medium-12 large-6 columns">
      <p>You can also create a new group.</p>
      <form>
        <div class="row">
          <div class="small-12 columns">
            <label>What's the Group name?</label>
            <input type="text" name="name" placeholder="e.g. Introduction to Python" value="" required="">

            <label>What Description should show up on the page?</label>
            <textarea name="description" rows="2" placeholder="What other information will group members need to know about this group?" required=""></textarea>

            <label>Group code to let others join.</label>
            <div class="faux-input" id="joinCode"></div>
            <input type="hidden" name="joinCode" value="">

            <a id="createGroupAddTrinket" data-trinket-id="" class="button success tiny"><i></i> Create Group</a>
          </div>
        </div>
      </form>
    </div>
  </div>
  <a class="close-reveal-modal">×</a>
</div>

  

  

  <div id="upgradeModal" class="reveal-modal full" data-reveal="" data-css-top="0" data-offset="0">
    
    
    <div class="row">
  <h2>Python 3 Now Available!</h2>
</div>
<div class="row">
  <p>
    This is a Python 3 trinket. It includes everything in
    <a href="https://www.python.org/downloads/release/python-365/" target="_blank">Python 3.6.6 <sup><i class="fa fa-external-link"></i></sup></a>
    as well as scientific libraries like <a href="http://www.scipy.org/" target="_blank">Numpy and SciPy <sup><i class="fa fa-external-link"></i></sup></a>
    and <a href="http://matplotlib.org/" target="_blank">matplotlib <sup><i class="fa fa-external-link"></i></sup></a>,
    with more on the way.
  </p>
</div>
<div class="row">
  <p>
    <a class="menu-button" data-href="/payment" data-action="open.link">Upgrade</a> to Trinket Code+
    or Trinket Connect now to create your own Python 3 trinkets!
    Learn more on our <a class="menu-button" data-href="/plans" data-action="open.link">plans page</a>.
    We offer a 30-day money back guarantee and you can cancel at any time.
  </p>
</div>
    
    <a class="close-reveal-modal">×</a>
  </div>

  

  <ul id="share-options" class="f-dropdown" data-dropdown-content="" role="menu">
    <li role="menuitem"><a class="menu-button" data-action="sharing.social" data-data=".addthis_button_twitter"><i class="fa fa-twitter"></i>Twitter</a></li>
    <li role="menuitem"><a class="menu-button" data-action="sharing.social" data-data=".addthis_button_facebook"><i class="fa fa-facebook-square"></i>Facebook</a></li>
    <li role="menuitem"><a class="menu-button" data-action="sharing.social" data-data=".addthis_button_google_plusone_share"><i class="fa fa-google-plus"></i>Google+</a></li>
    <li role="menuitem"><a class="menu-button" data-action="sharing.email" role="button"><i class="fa fa-envelope"></i>Email</a></li>
    <li role="menuitem"><a class="menu-button" data-action="sharing.share" role="button"><i class="fa fa-link"></i>Link</a></li>
    <li role="menuitem"><a class="menu-button" data-action="sharing.embed" role="button"><i class="fa fa-code"></i>Embed</a></li>
    
    <li><a class="menu-button" data-action="mode.download"><i class="fa fa-download"></i>Download</a></li>
    
  </ul>

  <ul id="group-share-options" class="f-dropdown" data-dropdown-content="">
    <li><a class="menu-button" data-action="sharing.group"><i class="fa fa-users"></i>with Group</a></li>
  </ul>

  

<ul id="run-options" class="f-dropdown" data-dropdown-content="">
  <li><a class="menu-button" data-action="code.run" data-button="run"><i class="fa fa-play"></i>Run</a></li>
  <li><a class="menu-button" data-action="code.console" data-button="console"><i class="fa fa-terminal"></i>Console</a></li>
</ul>



  
  <script id="restoreOriginalModalTemplate" type="text/html">
    <div id="restoreOriginalModal" class="reveal-modal medium" data-reveal data-css-top="35">
      <h2 id="modalTitle">Reset to the original?</h2>
      <p class="lead">Resetting will undo all of your current changes.</p>
      <a class="button small caution" data-action="reject">No, keep my remix.</a>
      <a class="button small danger" data-action="confirm">Yes, reset to the original.</a>
      <a class="close-reveal-modal" aria-label="Close">&#215;</a>
    </div>
  </script>

  <script id="unittest-error" type="text/template">
    <li class="accordion-navigation">
    <a href="#panel-{{testNumber}}">
      <div class="row really-wrong">
        <div class="small-9 column">
          <p><i class="fa fa-angle-right fa-lg open-close-indicator"></i>{{shortDescription}}</p>
        </div>
        <div class="small-3 column">
        <p class="text-center"><i class="fa fa-circle-o fa-lg"></i></p>
        </div>
      </div>
    </a>
    <div id="panel-{{testNumber}}" class="content">
      <p>
        <strong>Message:</strong> <pre>{{reason}}</pre>
      </p>
    </div>
    </li>
  </script>

  <script id="unittest-fail" type="text/template">
    <li class="accordion-navigation">
    <a href="#panel-{{testNumber}}">
      <div class="row really-wrong">
        <div class="small-1 column text-centered">
          <p><i class="fa fa-angle-right fa-lg open-close-indicator"></i></p>
        </div>
        <div class="small-9 column">
          <p>{{shortDescription}}</p>
        </div>
        <div class="small-2 column">
        <p class="text-center"><i class="fa fa-circle-o fa-lg"></i></p>
        </div>
      </div>
    </a>
    <div id="panel-{{testNumber}}" class="content">
      <p>
        <strong>Description:</strong> {{description}}
      </p>
      <p>
        <strong>Message:</strong> {{reason}}
      </p>
    </div>
    </li>
  </script>

  <script id="unittest-pass" type="text/template">
    <li class="accordion-navigation">
    <a href="#panel-{{testNumber}}">
      <div class="row really-right">
        <div class="small-1 column text-centered">
          <p><i class="fa fa-angle-right fa-lg open-close-indicator"></i></p>
        </div>
        <div class="small-9 column">
          <p>{{shortDescription}}</p>
        </div>
        <div class="small-2 column">
        <p class="text-center"><i class="fa fa-check-circle fa-lg"></i></p>
        </div>
      </div>
    </a>
    <div id="panel-{{testNumber}}" class="content">
      <p>
        <strong>Description:</strong> {{description}}
      </p>
    </div>
    </li>
  </script>

  <script id="guestMenuTemplate" type="text/html">
    <li>
      <form id="accountForm">
        <span class='message hide'></span>
        <input name="email"    type='email'    placeholder="Email"    required>
        <input name="password" type='password' placeholder="Password" required>
        <a id="login"    name="login"    class='button secondary small' data-action="login">Log In</a>
        <a id="register" name="register" class='button primary small'   data-action="signup">Create Account</a>
      </form>
    </li>
  </script>

  <script id="userMenuTemplate" type="text/html">
    

  </script>

  <script id="ownerMenuTemplate" type="text/html">
    <li><label>Options</label></li>
    <li>
      <a data-mode="interact" class="right-menu-link menu-button" data-action="code.save">
        <i class="fa fa-save"></i>Update Original
      </a>
    </li>
    

  </script>

  <script id="draftTextTemplate" type="text/html">
    <a class="menu-button" data-action="code.reset" title="Reset"><i class="fa fa-refresh"></i></a> {{draftText}}
  </script>

  <script id="addInstructionsTemplate" type="text/html">
    <p>Click the pencil icon to add instructions to your trinket. When anyone else views this trinket, they'll also be able to view them.</p>
  </script>

  <script id="editInstructionsTemplate" type="text/html">
    <div id="embedded-instructions"></div>
  </script>

  <script id="addInlineCommentTemplate" type="text/html">
    <div class="comment-wrapper">
      <div class="comment-heading-container">
        <div class="comment-avatar-container">
          <img class="comment-avatar" src="{{avatar}}" width="40" height="40" />
        </div>
        <span class="new-comment-container">
          <textarea class="inline-comment-text"></textarea>
        </span>
      </div>
      <div class="new-comment-actions">
        <a class="button tiny secondary save-inline-comment"><i class="fa fa-save"></i> Add Comment</a>
        <a class="button tiny caution cancel-inline-comment">Cancel</a>
      </div>
    </div>
  </script>

  <script id="inlineCommentTemplate" type="text/html">
    <div id="{{commentId}}" class="comment-wrapper">
      <div class="comment-heading-container">
        <div class="comment-avatar-container">
          <img class="comment-avatar" src="{{avatar}}" width="40" height="40" />
        </div>
        <div class="comment-info-container">
          <strong>{{username}}</strong>
          {{commentActions}}
        </div>
      </div>
      <div id="comment-container-{{commentId}}" class="comment-container">
        {{comment}}
      </div>
      <div id="edit-comment-container-{{commentId}}" class="edit-comment-container hide">
        <textarea id="edit-inline-comment-{{commentId}}" class="inline-comment-text"></textarea>
      </div>
    </div>
  </script>

  <script id="inlineCommentActions" type="text/html">
    <div class="comment-actions-wrapper">
      <a class="comment-actions move-comment-up disabled" data-file-index="{{index}}" data-comment-id="{{commentId}}" title="Move comment up"><i class="fa fa-angle-up"></i></a>
      <a class="comment-actions move-comment-down disabled" data-file-index="{{index}}" data-comment-id="{{commentId}}" title="Move comment down"><i class="fa fa-angle-down"></i></a>
      <a class="comment-actions" data-dropdown="comment-actions-{{commentId}}" title="More options"><i class="fa fa-ellipsis-v"></i></a>
    </div>
    <ul id="comment-actions-{{commentId}}" class="f-dropdown" data-dropdown-content>
      <li><a class="edit-inline-comment" data-comment-id="{{commentId}}"><i class="fa fa-pencil fa-fw"></i> Edit comment</a></li>
      <li><a class="confirm-remove-inline-comment" data-comment-id="{{commentId}}"><i class="fa fa-trash-o alert fa-fw"></i> Remove comment</a></li>
    </ul>
    <div class="confirm-remove-comment-container hide" id="confirm-remove-comment-container-{{commentId}}">
      <strong>Remove this comment?</strong><br /><br />
      <a class="confirm-remove-comment button tiny danger" data-file-index="{{index}}" data-comment-id="{{commentId}}"><i class="fa fa-trash-o"></i> Remove</a>
      <a class="cancel-remove-comment button tiny caution" data-comment-id="{{commentId}}">Cancel</a>
    </div>
    <div class="update-comment-container hide" id="update-comment-container-{{commentId}}">
      <a class="update-comment button tiny secondary" data-file-index="{{index}}" data-comment-id="{{commentId}}"><i class="fa fa-save"></i> Update</a>
      <a class="cancel-update-comment button tiny caution" data-comment-id="{{commentId}}">Cancel</a>
    </div>
  </script>
  <script id="inlineCommentDismiss" type="text/html">
    <div class="comment-actions-wrapper">
      <a class="comment-actions" data-dropdown="comment-actions-{{commentId}}"><i class="fa fa-ellipsis-v"></i></a>
    </div>
    <ul id="comment-actions-{{commentId}}" class="f-dropdown" data-dropdown-content>
      <li><a class="confirm-remove-inline-comment" data-comment-id="{{commentId}}"><i class="fa fa-trash-o alert fa-fw"></i> Remove comment</a></li>
    </ul>
    <div class="confirm-remove-comment-container hide" id="confirm-remove-comment-container-{{commentId}}">
      <strong>Remove this comment?</strong><br /><br />
      <a class="confirm-remove-comment button tiny danger" data-file-index="{{index}}" data-comment-id="{{commentId}}"><i class="fa fa-trash-o"></i> Remove</a>
      <a class="cancel-remove-comment button tiny caution" data-comment-id="{{commentId}}">Cancel</a>
    </div>
  </script>
  

  

  <script src="./localStorage.min.js" type="text/javacript"></script>

  
  <script src="./jszip.min.js"></script>
  <script src="./jszip-utils.min.js" type="text/javascript"></script>
  <!--[if IE]>
  <script src="/cache-prefix-1551212854834dist/jszip-utils-ie.min.js" type="text/javascript"></script>
  <![endif]-->
  <script src="./FileSaver.js"></script>
  

  <script src="./lodash.min.js"></script>
  <script src="./bluebird.min.js"></script>
  <script src="./moment.min.js" type="text/javascript"></script>

  

  
  <script src="./socket.io.min.js"></script>

  
  <script src="./sockjs.min.js"></script>
  <script src="./ace(1).js"></script>
  <script src="./ext-modelist.js"></script>
  <script src="./ext-language_tools.js"></script>
  <script type="text/javascript" src="./diff_match_patch.js"></script>
  <script type="text/javascript" src="./dropzone.min.js"></script>
  <script src="./marked.js"></script>
  <script src="./highlight.min.js"></script>
  <script src="./trinket-config.js"></script>
  <script src="./trinket-markdown.js"></script>
  

  <script type="text/javascript">
    window.trinketSocketConfig = {
        protocol         : 'https'
      , port             : ''
      , hostname         : 'pysocket.trinket.io'
      , autocompletePath : '/autocomplete'
    };
  </script>

  <script src="./jquery-ui.min.js"></script>
  

  
    <script src="./embed-python3-d3bd2da1.js" type="text/javascript"></script>
    
    <script type="text/javascript">
apiCall = function apiCall(event) {
  event.preventDefault();

  $('#spinner-container').removeClass('hide').addClass('fa fa-spinner fa-spin');
  $('#interest-go').toggleClass('disabled');

  var url = '/api/interest';
  var submitting = $.post(url, {
    email : $('#interest-email-address').val(),
    page  : 'python3-embed'
  });

  submitting.done(function(data) {
    setTimeout(function() {
      $('#spinner-container').removeClass('fa fa-spinner fa-spin').addClass('hide');
      $('#interest-go').toggleClass('disabled');

      $('#success-box').fadeIn();
      setTimeout(function() {
        $('#success-box').fadeOut();
      }, 20000);
    }, 1000);
  });
};

$('#interest-go').click(apiCall);
$('#interest-signup-form').submit(function() {
  $('#interest-go').click();
});
</script>

  


  
  
  
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 970987464;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<div style="display:none">
<script type="text/javascript" src="./f(1).txt">
</div>
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/970987464/?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>
  

  
  
<script src="./oct.js" type="text/javascript" async="true"></script>
    
      
  
<script type="text/javascript">
twttr.conversion.trackPid('l4kgy', { tw_sale_amount: 0, tw_order_quantity: 0 });</script>
<noscript>
<img height="1" width="1" style="display:none;" alt="" src="https://analytics.twitter.com/i/adsct?txn_id=l4kgy&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" />
<img height="1" width="1" style="display:none;" alt="" src="//t.co/i/adsct?txn_id=l4kgy&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" /></noscript>
  

    
    
  


    
      


    
  



</div><div class="tab-options" role="button"><ul><li><a class="file-remove-link menu-button" data-action="file.remove"><i class="fa fa-trash"></i></a></li><li><a class="file-rename-link menu-button" data-action="file.rename"><i class="fa fa-pencil"></i></a></li></ul></div><div class="editor-tooltip" style="display: none;"></div><span data-selector="tooltip-jsm82y2h0" id="tooltip-jsm82y2h0" class="tooltip" role="tooltip">Name must be unique. Lowercase letters, numbers, and dashes are allowed.<span class="nub"></span></span></body></html>